<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline :model="searchForm" ref="searchForm">
          <el-form-item label="话题">
            <el-select style="width:500px"  v-model="searchForm.invitation_type_id">
              <el-option label="全部" value="" />
              <el-option
                v-for="(oVal, oIdx) of types"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="user_nick_name" label="实名信息" />
        <el-table-column prop="user_avatar_url" label="微信头像">
          <template #default="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.user_avatar_url"
              :preview-src-list="[row.user_avatar_url]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发帖时间" />
        <!-- <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <span :class="auditClass[row.status]">
              {{ auditObj[row.status] }}
            </span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="240px" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="checkDetail(row)"
              >帖子详情</el-button
            >
            <el-button type="text" @click="checkDebate(row.id)"
              >查看评论</el-button
            >
            <el-button class="red" type="text" @click="deletePost(row.id)"
              >删除帖子</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10,20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="帖子详情"
      :visible.sync="showAddOrEdit"
      width="1000px"
      @closed="closeDialog()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="6em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item label="实名信息" class="span-2" prop="user_nick_name">
          <el-input readonly
            v-model="builingForm.user_nick_name"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="发帖时间" class="span-2" prop="create_time">
          <el-input readonly
            v-model="builingForm.create_time"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题"  prop="title">
          <el-input readonly
            v-model="builingForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <tinymce v-model="builingForm.content" height="300" />
      </el-form>

      <template #footer>
        <el-button
          type="primary"
          @click="closeDialog()"
          :loading="loading.update"
          >关闭</el-button
        >
      </template>
    </el-dialog>

    <el-dialog title="帖子评论" :visible.sync="showUserList">
      <el-table :data="debateForm.userList">
        <el-table-column property="user_nick_name" label="微信昵称" />
        <el-table-column property="user_avatar_url" label="用户头像">
          <template #default="{row}">
            <el-image
              v-if="row.user_avatar_url"
              style="width: 100px; height: 100px"
              :src="row.user_avatar_url"
              :preview-src-list="[row.user_avatar_url]"
            />
            <span v-else>暂未录入</span>
          </template>
        </el-table-column>
        <el-table-column property="content" label="评论内容" show-overflow-tooltip />
        <el-table-column property="create_time" label="评论时间" />
        <el-table-column property="like_num" label="点赞数" />
        <el-table-column label="操作" width="180px" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="deleteDebate(row.id)"
              >评论删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit, auditStatus } from "@/utils/mixins";
import Tinymce from "@/components/Tinymce";

export default {
  mixins: [table, addOrEdit, auditStatus],
  components: {
    Tinymce,
  },

  data: () => ({
    tableData:[],
    tableTotal: 0,
    isKey: false,
    types:[],
    isLoading: true,
    showAddOrEdit:false,//编辑
    showUserList:false,//用户评论弹窗
    searchForm: {
      invitation_type_id:"",
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },
    builingForm: {
      $id: "",
      title:"",
      content:''
    },
    debateForm:{
      $id:'',
      userList:[],//用户评论
    },

    status: [
      { label: '通过', value: true },
      { label: '不通过', value: false },
    ],
    statusClass: {
      true: 'green',
      false: 'red',
    }
  }),

  created() {
    API.getVillageTopicList({ per_page: 60})
      .then(({data}) => {
        let type=data.items.map(item=>{
          return {label:item.name,value:item.id}
        })
        this.types=type
        this.getList()
      }).catch((err) => {
      }).finally(() =>{
      })
  },

  methods: {
    // 获取列表
    getList(){
      this.isLoading=true
      API.getTopicPostList(this.searchForm.invitation_type_id,this.searchForm)
        .then(({data}) => {
          this.tableData=data.items
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 帖子删除
    deletePost(id){
      let _that=this
      this.$confirm(`是否删除这条帖子？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delTopicPost(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 查看详情
    checkDetail(obj){
      this.builingForm.content=obj.content
      this.builingForm.title=obj.title
      this.builingForm.create_time=obj.create_time
      this.builingForm.user_nick_name=obj.user_nick_name
      this.showAddOrEdit=true
    },

    // 查看评论
    checkDebate(id){
      this.debateForm.$id=id
      this.getDebateList()
      this.showUserList=true
    },

    // 获取评论列表
    getDebateList(){
      API.asociationPostList(this.debateForm.$id)
        .then(({data}) => {
          this.debateForm.userList=data.items
        }).catch((err) => {
          this.debateForm.userList=[]
        }).finally(() =>{
        })
    },

    // 评论删除
    deleteDebate(id){
      let _that=this
      this.$confirm(`是否删除改条评论？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.asociationPostDelete(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getDebateList()
        })
      })
      .catch(() => {
      });
    },

    // 关闭弹窗
    closeDialog(){
      this.builingForm.title=""
      this.builingForm.create_time=""
      this.builingForm.user_nick_name=""
      this.builingForm.content=""
      this.showAddOrEdit=false
    }
  },
};
</script>

<style lang="scss" scoped></style>
